<template lang="html">
  <div id="gender" v-on:click="choosed($event)" v-if="select">
    <div class="gender" >
      <h1>你的性别？</h1>
      <div class="item" v-on:click.stop="choosed($event)" :class="{ choosed : male}">男</div>
      <div class="item" v-on:click.stop="choosed($event)" :class="{ choosed : female}">女</div>
  </div>
    <span class="next"  @click.stop="judge">
      下一步>
    </span>
    <transition name="fade">
        <div class="tip" id="tip">
          请输入性别
        </div>
    </transition>
     <Loading v-if="LoadingShow"></Loading>
  </div>
  <div  v-else>
    <Height></Height>
  </div>
</template>

<script>
import {
    showFooter,hideFooter,errFun,refreshTitle
} from "../../tools.js";
import Loading from '../loading';
import Height from './height.vue'
import api from '../../api';

export default {
  components: {
      Loading,
      Height
  },
  data(){
    return {
      male:false,
      female:false,
      select:true
    }
  },
  computed:{
    LoadingShow() {
        return this.$store.state.loadings.show
    },
  },
  created(){
    refreshTitle(this.$route.meta.title);
  },
  methods: {
    //点击改变样式
    choosed(e) {
      var el = e.currentTarget
      this.male = false;
      this.female = false;
      if (el.innerHTML == '男') {
        this.male = true
        document.getElementById('tip').style.display = 'none';
      }else if (el.innerHTML == '女') {
          this.female = true
          document.getElementById('tip').style.display = 'none';
      } else{
        this.male = false;
        this.female = false;
      }
    //   console.log( document.querySelector('.choosed'));
    },

    //判断样式存在否，提交信息
    judge() {
      // console.log( document.querySelector('choosed'));
      var gender = document.querySelector('.choosed');
      if (gender != null){
        var that = this;
           api.setUserInfo(gender.innerHTML).then(response =>{
             if (response.status == 200) {
                // this.$router.push('/user/height');
                //console.log(that.select);
                that.select = false;

             }
           })
      }else {
           document.getElementById('tip').style.display = 'block';
      }

    },
  },
  mounted() {
      this.$nextTick(function() {
          // 代码保证 this.$el 在 document 中
          //实现底部的动画效果及取消padding值
          var app = document.getElementById('app');
          app.style.paddingBottom = "0px";
          var footer = document.getElementById('footer');
          hideFooter(footer);
          //或取btn按钮，判断显示与隐藏
          var btn = document.querySelector(".btn");
          var btnwrapper = document.querySelector(".btnwrapper");
      });
  },

  beforeDestroy() {
      var app = document.getElementById('app');
      app.style.paddingBottom = "50px";
      var footer = document.getElementById('footer');
      showFooter(footer);
  }
}
</script>

<style lang="css">
#gender{
   height: 100rem;
  .choosed {
    background-color: #fdb801;
    color: #fff;
  }
  .gender{
    position: absolute;
    top: 20%;
    left: 20%;
    text-align: center;
    width: 60%;

    h1{
      font-size: 2.1rem;
      color: #fdb801;
      font-weight: 500;
      padding: 5%;
    }
    .item{
      color: #fdb801;
      display: inline-block;
      border-radius: 50%;
      border: 0.5px solid #fdb801;
      width: 4.3rem;
      height: 4.3rem;
      line-height: 4.3rem;
      margin: 5%;
      font-size: 1.8rem;
      font-weight: 400;

    }
    .item:hover {
      background-color: #fdb801;
      color: #fff;
    }
  }
  .next {
      position: absolute;
      bottom: 20%;
      left: 20%;
      color: #161616;
      font-size: 1.2rem;
      line-height: 2;
      display: block;
      text-align:center;
       border-radius: 2rem;
       background-color: #fdb801;
       width: 60%;
       padding-bottom: 0.3rem;
       padding-top: 0.3rem;
       margin: 0 auto;
  }
  .tip{
    width: 100%;
    line-height: 4;
    position: absolute;
    font-size: 1.2rem;
    color: #161616;
    text-align: center;
    bottom: 33%;
    background-color: #717787;
    display: none;
  }
}
</style>
